﻿<!doctype html>
<html>
<head><meta charset="utf-8" /></head>
 <title>昨夜星辰</title>

<body>
<canvas id="Canvas2D" width="1200" height="800">Internet Explorer Not Supported :(</canvas>


<script>
	var fov = 250;

	var SCREEN_WIDTH = 1200;
	var SCREEN_HEIGHT = 800;

	var HALF_WIDTH = SCREEN_WIDTH/2;
	var HALF_HEIGHT = SCREEN_HEIGHT/2;

	var numPoints = 2000;

	var mouseX = 0;
	var mouseY = -200;


	function draw3Din2D(point3d)
	{
		x3d = point3d[0];
		y3d = point3d[1];
		z3d = point3d[2];
		var scale = fov/(fov+z3d);
		var x2d = (x3d * scale) + HALF_WIDTH;
		var y2d = (y3d * scale)  + HALF_HEIGHT;


		c.lineWidth= scale;
		c.strokeStyle = "rgb(255,255,255)";
		c.beginPath();
		c.moveTo(x2d,y2d);
		c.lineTo(x2d+scale,y2d);
		c.stroke();

	}

	var canvas = document.getElementById('Canvas2D');
	var c = canvas.getContext('2d');

	document.onmousemove = updateMouse;
//canvas.addEventListener('mousemove', updateMouse, false);

	var points = [];

	function initPoints()
	{
		for (i=0; i<numPoints; i++)
		{
			point = [(Math.random()*400)-200, (Math.random()*400)-200 , (Math.random()*400)-200 ];
			points.push(point);
		}

	}

	function render()
	{

		c.fillStyle="rgb(0,0,0)";
		c.fillRect(0,0, SCREEN_WIDTH, SCREEN_HEIGHT);

		for (i=0; i<numPoints; i++)
		{
			point3d = points[i];
			//rotatePointAroundY(point3d, mouseX*-0.0003);
			//point3d[2] += (mouseY*0.08);


			//if(point3d[0]<-300) point3d[0] = 300;
			//else if(point3d[0]>300) point3d[0] = -300;

			//if(point3d[2]<-fov) point3d[2] = fov;
			//else if(point3d[2]>249) point3d[2] = -249;

			draw3Din2D(point3d);

		}
	}

	function rotatePointAroundY(point3d, angle)
	{
		x = point3d[0];
		z = point3d[2]+fov;

		cosRY = Math.cos(angle);
		sinRY = Math.sin(angle);
		tempz = z;
		tempx = x;


		x= (tempx*cosRY)+(tempz*sinRY);
		z= (tempx*-sinRY)+(tempz*cosRY);
		point3d[0] = x;
		point3d[2] = z-fov;
	}

	function updateMouse(e)
	{
		//alert(c+" "+c.offsetLeft);
		mouseX = e.pageX - canvas.offsetLeft - HALF_WIDTH;
		mouseY = e.pageY - canvas.offsetTop - HALF_HEIGHT; ;
	}

	initPoints();

	var loop = setInterval(function()
	{
		render();
	}, 50);




</script>
</body>
</html>